<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cavas--yohao</title>
    <style>
        html {
            height: 100%;
        }
        
        body {
            font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
            background: linear-gradient(to bottom, rgb(10, 10, 50) 0%, rgb(60, 10, 60) 100%);
            color: #CFEBE4;
            font-size: 18px;
            line-height: 2;
            letter-spacing: 1.2px;
            margin: 0;
        }
        
        .canvas {
            margin: 0 auto;
            display: block;
        }
    </style>
</head>

<body class="body-ready">
    <div>
        <canvas class="canvas" width="275" height="637"></canvas>
    </div>
</body>
<script>
    var S = {
        init: function() {
            S.Drawing.init('.canvas')
                // S.Drawing.drawCircle(new S.Point({x:10,y:10,z:2}), 55);
                // S.Dot.render();

            S.Shape.round(new S.Point({
                x: 100,
                y: 100,
                z: 200,
                h: 200
            }));
            // console.log(dot.render)
            S.Drawing.loop(function() {

                // let x = Math.floor(Math.random() * 200) + 100,
                //     y = Math.floor(Math.random() * 100) + 100;

                // S.Shape.round(new S.Point({
                //     x: x,
                //     y: y,
                //     z: 200,
                //     h: 200
                // }));
                // S.Shape.clear();
            });
        }
    };
    S.Drawing = (function() {
        var canvas,
            context,
            renderFn,
            requestFrame =
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };

        requestFrame.call
        return {
            init: function(el) {
                canvas = document.querySelector(el);
                context = canvas.getContext('2d');
                this.adjustCanvas();
                window.addEventListener('resize', function(e) {
                    S.Drawing.adjustCanvas();
                });

            },
            loop: function(fn) {
                renderFn = !renderFn ? fn : renderFn;
                this.clearFrame();
                renderFn();
                requestFrame.call(window, this.loop.bind(this));
            },
            adjustCanvas: function() {
                canvas.width = window.innerWidth - 100;
                canvas.height = window.innerHeight - 30;
            },
            clearFrame: function() {
                context.clearRect(0, 0, canvas.width, canvas.height);
            },
            getArea: function() {
                return {
                    w: canvas.width,
                    h: canvas.height
                };
            },
            drawCircle: function(p, c) {
                context.fillStyle = c.render();
                context.beginPath();
                context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
                context.translate(100);
                context.closePath();
                context.fill();
            }
        }
    })()

    S.Point = function(args) {
        this.x = args.x;
        this.y = args.y;
        this.z = args.z;
        this.a = args.a;
        this.h = args.h;
    }
    S.Color = function(r, g, b, a) {
        this.r = r;
        this.g = g;
        this.b = b;
        this.a = a;
    };

    S.Color.prototype = {
        render: function() {
            return 'rgba(' + this.r + ',' + +this.g + ',' + this.b + ',' + this.a + ')';
        }
    };

    //绘画 点
    S.Dot = function(x, y) {
        this.p = new S.Point({
            x: x,
            y: y,
            z: 5,
            a: 1,
            h: 0
        });

        this.e = 0.07;
        this.s = true;

        this.c = new S.Color(255, 255, 255, this.p.a);

        this.t = this.clone();
        this.q = [];
    };

    S.Dot.prototype = {
        clone: function() {
            return new S.Point({
                x: this.x,
                y: this.y,
                z: this.z,
                a: this.a,
                h: this.h
            });
        },
        _draw: function() {
            this.c.a = this.p.a;
            S.Drawing.drawCircle(this.p, this.c);
        },
        render: function() {
            this._draw();
        }
    }
    S.Shape = (function() {
        var dots = [],
            width = 0,
            height = 0,
            cx = 0,
            cy = 0;

        return {
            round: function(p) {
                let dis = 24;
                let length = Math.floor(p.z / dis);
                let height = Math.floor(p.h / dis);
                for (let index = 0; index < length; index++) {
                    dots.push(new S.Dot(p.x + index * dis, p.y));
                    dots.push(new S.Dot(p.x + index * dis, p.y + height * dis));
                }
                for (let index = 0; index < height; index++) {
                    dots.push(new S.Dot(p.x, p.y + index * dis));
                    dots.push(new S.Dot(p.x + (length - 1) * dis, p.y + index * dis));
                }
                this.render();
            },
            clear: function() {
                dots = [];
            },
            render: function() {
                for (var d = 0; d < dots.length; d++) {
                    dots[d].render();
                }
            }
        }
    })();



    //init
    S.init();
</script>

</html>